<template>
	<view class="lose-body">
		<view class=" lose-list" @click="gotoDetail(losedata)">
			<view class="lose-item">
				<view class="img">
					<image :src="losedata.imgList[0]" mode="">
					</image>
				</view>
				<view class="lose-content">
					<h4>{{losedata.name}}</h4>
					<view class="region">{{losedata.region}}</view>
					<view class="date">{{losedata.date}}</view>
					<view class="desc">{{losedata.desc}}</view>
					<view class="pubtime">{{losedata.time}}</view>
				</view>
			</view>
		</view>
		<view class="handle-btn" v-if="handle">
			<view>
				<button class="update-btn" size="mini" type="primary" @click="getupdate(losedata._id)">修改</button>
				<button class="delete-btn" size="mini" type="warn" @click="getdelete(losedata._id)">删除</button>
			</view>
		</view>
	</view>

</template>

<script setup>
	import {
		defineProps,
		defineEmits,
		ref
	} from 'vue';
	import {
		formatTime
	} from '../../utils/index.js';
	const emit = defineEmits(['getupdate', 'getdelete'])
	const getupdate = (id) => {
		emit('getupdate', id)
	}
	const getdelete = (id) => {
		emit('getdelete', id)
	}
	defineProps({
		losedata: {
			type: Object,
			default: {}
		},
		handle: {
			type: String,
			default: 'false'
		}
	})

	// 跳转到detail页面
	const gotoDetail = (e) => {
		const info = {
			_id: e._id,
		}
		uni.navigateTo({
			url: `/subpkg/lose-Detail/lose-Detail?_id=${info._id}`
		})
	}
</script>

<style lang="less">
	.lose-body {
		background-color: #fff;
		margin-bottom: 5rpx;

		.handle-btn {
			display: flex;
			justify-content: flex-end;

			.update-btn,
			.delete-btn {
				margin-right: 20rpx;
			}
		}

		.lose-list {
			display: flex;
			flex-direction: column;

			.lose-item {
				display: flex;
				padding: 20rpx;
				background-color: #fff;

				box-sizing: border-box;
				width: 100%;

				image {
					width: 250rpx;
					height: 250rpx;
					min-width: 250rpx;
					border-radius: 20rpx;
				}

				.lose-content {
					display: flex;
					flex-direction: column;
					margin-left: 10rpx;
					width: 100%;

					.region {
						margin-top: 35rpx;
						font-size: 26rpx;
					}

					.date,
					.desc {
						font-size: 26rpx;
						margin-bottom: 5rpx;
					}

					.desc {
						color: #666;
						text-overflow: ellipsis;
						white-space: nowrap;
						overflow: hidden;
						width: 400rpx;
					}

					.pubtime {
						margin-top: 30rpx;
						margin-left: auto;
						color: #666;
						font-size: 26rpx;
					}
				}
			}
		}
	}
</style>